<template>
  <div id="classTable">
    <el-table
      :data="tableData"
      style="width:100%;"
      class="borderLine">
      <el-table-column
        prop="company"
        label="企业名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="班级名称"
        :width="230">
      </el-table-column>
      <el-table-column
        prop="require"
        label="职位需求"
        :width="180">
      </el-table-column>
      <el-table-column
        prop="apply"
        label="报名预约"
        :width="128">
        <template slot-scope="scope">
          <a href="#" class="apply-text">{{ scope.row.apply }}</a>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props:{
    classData:Array,
  },
  data () {
    return {
      tableData: this.classData
    }
  }
}
</script>

<style>
  #classTable{
    margin-top:44px;
    width:720px;
    border:22px solid rgb(250,250,250);
    display:flex;
    justify-content: center;
    align-items: center;
  }
  .borderLine{
    border:1px solid rgb(0,160,232);
  }
  #classTable .cell{
    text-align:center;
  }
  #classTable .has-gutter .cell{
    font-weight:550;
    font-size:16px;
    line-height:23px;
  }
  #classTable .cell{
    color:black;
  }
  #classTable .el-table__header{
    border-bottom:1px solid rgb(0,160,232);
  }
  #classTable .el-table td, .el-table th.is-leaf{
    border-bottom:1px solid rgb(0,160,232);
  }
  .apply-text{
    text-decoration: none;
    color:rgb(0,160,234);
  }
</style>
